<template>
	<view>
		<u-navbar title="添加意向学员"  :autoBack="true" safeAreaInsetTop fixed placeholder />
		<view class="bg-white u-padding-20">
			<u--form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-width="80" label="学员姓名" prop="name" borderBottom>
					<u--input placeholder="请填写学员姓名" v-model="model.name"></u--input>
				</u-form-item>
				<u-form-item label-width="80" label="手机号码" prop="tel" borderBottom>
					<u--input placeholder="手机号码用于系统登录" v-model="model.tel"></u--input>
				</u-form-item>
				
				<u-form-item label-width="80" label="家长姓名" prop="familyName" borderBottom>
					<u--input placeholder="请填写家长姓名" v-model="model.familyName"></u--input>
				</u-form-item>
				
				<u-form-item
					label="亲属关系"
					label-width="80"
					prop="familyRelName"
					borderBottom
					@click="showSex = true; hideKeyboard()"
					ref="item1">
					<u--input
						v-model="model.familyRelName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择亲属关系"
						border="none"
					></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label-width="80" label="学员性别" prop="gender" borderBottom>
					<u-radio-group v-model="selectedGender" @change="radioGroupChange">
						<u-radio :customStyle="{marginRight: '16px'}" shape="circle" 
							v-for="(item, index) in this.$getDictDatas(this.$dictType.SYSTEM_USER_SEX)" 
							:key="index" :label="item.label" :name="item.value" value="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item  label-width="80"
					label="出生年月"
					prop="birthday"
					borderBottom
					@click="showBirthday = true; hideKeyboard()"
					ref="item1"
				>
					<u--input
						v-model="model.birthday"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择出生年月"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				
				<u-form-item label-width="80" label="身份证号" prop="idcard" borderBottom>
					<u--input v-model="model.idcard"></u--input>
				</u-form-item>
				
				<u-form-item label-width="80" label="学员来源" prop="joinWay" borderBottom v-if="false">
					<u--input v-model="model.joinWay"></u--input>
				</u-form-item>
				
				<u-form-item label-width="80" label="亲属关系" prop="familyRel" borderBottom v-if="false">
					<u--input v-model="model.familyRel"></u--input>
				</u-form-item>
				
				<u-form-item label-width="80" label="学员状态" prop="status" borderBottom v-if="false">
					<u--input v-model="model.status" ></u--input>
				</u-form-item>
				
				<u-form-item
					label="学员来源"
					label-width="80"
					prop="joinWayName"
					borderBottom
					@click="showJoinWay = true; hideKeyboard()"
					ref="item1"
				>
					<u--input
						v-model="model.joinWayName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择来源"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				
				<u-form-item label-width="80" label="备注信息" prop="remark" borderBottom>
					<u--input type="textarea" v-model="model.remark"></u--input>
				</u-form-item>
			</u--form>
			
			<view class="fix-bottom-buttons" customStyle="margin-top: 10px">
				<u-row justify="space-between" gutter="10">
					<u-col span="6">
						<u-button type="primary" text="提交" @click="submit"></u-button>
					</u-col>
					<u-col span="6">
						<u-button type="error" text="重置" @click="reset"></u-button>
					</u-col>
				</u-row>
			</view>
			<view>
				<u-datetime-picker
					:show="showBirthday"
					:value="birthday"
					mode="date"
					closeOnClickOverlay
					@confirm="birthdayConfirm"
					@cancel="birthdayClose"
					@close="birthdayClose"
				></u-datetime-picker>
				
				<u-action-sheet
					:closeOnClickAction="true"
					:show="showSex"
					:actions="actions4Family"
					title="请选择亲属关系"
					@close="showSex = false"
					@select="sexSelect"
					cancelText="取消"
				>
				</u-action-sheet>
				
				<u-action-sheet
					:closeOnClickAction="true"
					:show="showJoinWay"
					:actions="actions4JoinWay"
					title="请选择学员来源"
					@close="showJoinWay = false"
					@select="joinWaySelect"
					cancelText="取消"
				>
				</u-action-sheet>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/utils/request'
	export default {
		components: {},
		data() {
			return {
				showSex: false,
				showJoinWay: false,
				selectDate: false,
				showBirthday: false,
				birthday: Number(new Date()),
				actions4JoinWay: [],
				actions4Family: [],
				
				actions: [],
				
				pickerParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				model: {
					name: '',
					tel: '',
					gender: '',
					birthday: '',
					idcard: '',
					remark: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入学生姓名',
						trigger: 'change'
					}],
					familyName: [{
						required: true,
						message: '请输入家长姓名',
						trigger: 'change'
					}],
					tel: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					gender: [{
						required: true,
						message: '请选择学员性别',
						trigger: 'change'
					}],
				},

				selectedGender: '未知',
				genderEnum: [{
						name: '未知',
						checked: true
					},
					{
						name: '男',
						checked: false
					},
					{
						name: '女',
						checked: false
					}
				],
				errorType: ['message'],
			}
		},
		onLoad() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
		   this.joinWay();
		   this.familyRel();
		},
		methods: {
			joinWay() {
				const joinWayArray = this.$getDictDatas(this.$dictType.JOIN_WAY);
				joinWayArray.forEach(item => {
					let newData = { 
							name:item.label,
							value:item.value
						};
					
					this.actions4JoinWay.push(newData)
				});
			},
			familyRel() {
				const familyRelArray = this.$getDictDatas(this.$dictType.FAMILY_REL);
				familyRelArray.forEach(item => {
					let newData = {
							name:item.label,
							value:item.value
						};
					this.actions4Family.push(newData);
				});
			},
			sexSelect(e) {
				this.model.familyRelName = e.name
				this.model.familyRel = e.value
				this.$refs.uForm.validateField('familyRel')
			},
			joinWaySelect(e) {
				this.model.joinWayName = e.name
				this.model.joinWay = e.value
				this.$refs.uForm.validateField('joinWayName')
			},
			birthdayClose() {
				this.showBirthday = false
				this.$refs.uForm.validateField('birthday')
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.model.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$refs.uForm.validateField('birthday')
			},
			radioGroupChange(v) {
				this.model.gender = v
			},
			chooseDate(a) {
				this.model.birthday = a.year + '-' + a.month + '-' + a.day
			},
			hideKeyboard() {
				uni.hideKeyboard();
			},
			reset() {
				//const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro','hotel', 'code', 'userInfo.birthday']
				this.$refs.uForm.resetFields()
				this.$refs.uForm.clearValidate()
				//setTimeout(()=>{
					//this.$refs.uForm.clearValidate(validateList)
					// 或者使用 this.$refs.uForm.clearValidate()
				//},10)
			},
			submit() {
				this.model.status = 0;
				this.model.stage = 1;
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.uForm.validate().then(res => {
					request({url:'/erp/student/create',data:this.model,method:'post'}).then(res => {
						if (!this.$common.handleResponseMsg(res)) return;
						this.$common.showAlert("", "已添加成功！", () => {
							uni.navigateTo({
								url: '/pages/student/index',
							})
						})
					});
				}).catch(errors => {
				})
			},
			clickLeft() {
				uni.switchTab({
					url: '/pages/index/index',
				})
			},
			clickRight() {
				uni.navigateTo({
					url: '/pages/student/index',
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-padding-20 {
		padding:20px;
	}
</style>
